<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>图片填充 object-fit</title>
    <style>
      h2 {
        font-family: Courier New, monospace;
        font-size: 1em;
        margin: 1em 0 0.3em;
      }

      img {
        width: 150px;
        height: 100px;
        border: 1px solid #000;
        margin: 10px 0;
      }

      .narrow {
        width: 100px;
        height: 150px;
      }

      .fill {
        object-fit: fill;
      }

      .contain {
        object-fit: contain;
      }

      .cover {
        object-fit: cover;
      }

      .none {
        object-fit: none;
      }

      .scale-down {
        object-fit: scale-down;
      }
    </style>
  </head>
  <body>
    <section>
      <h2>object-fit: fill</h2>
      <img
        class="fill"
        src="https://live.mdnplay.dev/zh-CN/docs/Web/CSS/object-fit/mdn_logo_only_color.png"
        alt="MDN Logo"
      />

      <img
        class="fill narrow"
        src="https://live.mdnplay.dev/zh-CN/docs/Web/CSS/object-fit/mdn_logo_only_color.png"
        alt="MDN Logo"
      />

      <h2>object-fit: contain</h2>
      <img
        class="contain"
        src="https://live.mdnplay.dev/zh-CN/docs/Web/CSS/object-fit/mdn_logo_only_color.png"
        alt="MDN Logo"
      />

      <img
        class="contain narrow"
        src="https://live.mdnplay.dev/zh-CN/docs/Web/CSS/object-fit/mdn_logo_only_color.png"
        alt="MDN Logo"
      />

      <h2>object-fit: cover</h2>
      <img
        class="cover"
        src="https://live.mdnplay.dev/zh-CN/docs/Web/CSS/object-fit/mdn_logo_only_color.png"
        alt="MDN Logo"
      />

      <img
        class="cover narrow"
        src="https://live.mdnplay.dev/zh-CN/docs/Web/CSS/object-fit/mdn_logo_only_color.png"
        alt="MDN Logo"
      />

      <h2>object-fit: none</h2>
      <img
        class="none"
        src="https://live.mdnplay.dev/zh-CN/docs/Web/CSS/object-fit/mdn_logo_only_color.png"
        alt="MDN Logo"
      />

      <img
        class="none narrow"
        src="https://live.mdnplay.dev/zh-CN/docs/Web/CSS/object-fit/mdn_logo_only_color.png"
        alt="MDN Logo"
      />

      <h2>object-fit: scale-down</h2>
      <img
        class="scale-down"
        src="https://live.mdnplay.dev/zh-CN/docs/Web/CSS/object-fit/mdn_logo_only_color.png"
        alt="MDN Logo"
      />

      <img
        class="scale-down narrow"
        src="https://live.mdnplay.dev/zh-CN/docs/Web/CSS/object-fit/mdn_logo_only_color.png"
        alt="MDN Logo"
      />
    </section>
  </body>
</html>
